import React, { useState } from 'react'
import { Button, InfiniteScroll } from 'antd-mobile'
import axios from 'axios'
import { Tabs } from 'antd-mobile'
import "./App.scss"

function App() {
  // 定义一个列表数据
  const [dataList, setDataList] = useState([])
  // 当前页
  const [pageCode, setPageCode] = useState(1)


  // 定义一个函数，用来获取列表列表
  const FetchList = async () => {
    const res = await axios.get('/api/room/list', { params: { pageCode } });
    console.log(res, '列表')
    const newData = (res.data.data.list)

    // 方法1
    // setDataList(dataList.concat(newData))
    // 方法2
    setDataList([...dataList, ...newData])

    // 更新页码
    setPageCode(pageCode + 1)
  }


  // 调用
  // useEffect(() => {
  //   FetchList()
  // }, [])
  return (
    <div>
      <Button color='primary' fill='solid'>按钮</Button>
      {/* 标签页 */}
      <Tabs>
        <Tabs.Tab title='火车' key='fruits'>
          <div className='pai'>
            {dataList && dataList.map((item, index) => <dl key={index}>
              <dt>
                <img src={item.url} alt="" />
              </dt>
              <dd>
                <p>名称:{item.name}</p>
                <p>标题:{item.title}</p>
                <p className='p1'>价格:{item.price}</p>
              </dd>
            </dl>)}
          </div>
          {/* 调用 ---FetchList  */}
          <InfiniteScroll loadMore={FetchList} hasMore={true} />
        </Tabs.Tab>
        <Tabs.Tab title='中转' key='vegetables'>
          中转
        </Tabs.Tab>
      </Tabs>

    </div>
  )
}

export default App
